<template>
  <div v-loading="loading">
    <ul class="standard_pic_box">
      <li v-for="item in standardList" :key="item.id" @click="liClick(item)">
        <div class="standard_desc">{{item.standardDesc}}</div>
        <img style="width:120px; height: auto; vertical-align: middle;" :src="item.standardUrl">
      </li>
    </ul>
  </div>
</template>

<script>
import {getInspectionStandards} from '@/api/publicbasic/inspectionSpecification.js'
export default {
  props: ['productId'],
  data () {
    return {
      standardList: [],
      loading: false
    }
  },
  created () {
    this.loading = true
    getInspectionStandards({productId: this.productId}).then(res => {
      this.standardList = res.data.data
      this.loading = false
    }).catch(() => {
      this.loading = false
    })
  },
  methods: {
    liClick (data) {
      this.$emit('selectFinish', data)
    }
  }
}
</script>

<style scoped lang="scss">
.standard_pic_box {
  width: 100%;
  height: 30vh;
  overflow: hidden;
  overflow-y: scroll;
  padding: 0;
  li {
    list-style: none;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  li:hover {
    background: #eee;
  }
}
.standard_desc {
  width: 160px;
}
</style>